<!--
 * @Description  : 书籍分类
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->
<template>
  <AppPage class="bg-[#f4f4f4]" :header-class="'bg-[#f4f4f4]'">
    <template #center>
      <router-link to="search">
        <nut-searchbar input-background="#e8e8e8" background="none" readonly shape="round" />
      </router-link>
    </template>

    <nut-tabs v-if="worksTypeList.length" v-model="typeTab" @change="typeChange">
      <nut-tab-pane v-for="item in worksTypeList" :key="item.type" :pane-key="item.type" :title="item.typeName" />
    </nut-tabs>

    <nut-tabs v-if="classifies.length" v-model="classifiesTab" type="line" shrink z-0 @change="classifiesChange">
      <nut-tab-pane v-for="item in classifies" :key="item.moduleId" :pane-key="item.moduleId" :title="item.moduleName" />
    </nut-tabs>
    <p class="text-12 c-[#7b7b7b] mt-20">共{{ total }}条内容</p>

    <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
      <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
        <article v-for="(item, index) in worksList" :key="index" flex items-center mt-10 bg-white p-10 b-rd-5>
          <router-link :to="{ name: 'worksDetail', query: { worksName: item.worksName, moduleWorksId: item.moduleWorksId } }">
            <nut-image radius="8" width="75" :src="item.imgUrl" />
          </router-link>
          <section ml-10>
            <h4>{{ item.worksName }}</h4>
            <div mt-10 flex items-center>
              <div m-r-5 bg-yellow w-5 h-5 b-rounded-50></div>
              <p text-10>{{ item.author }}</p>
            </div>
            <p class="text-10 c-[#7b7b7b] mt-10 text-ellipsis--l1 w-220">{{ item.intro }}</p>
            <p class="text-10 fw-600 mt-10 c-[#c86071]"><span>￥</span> {{ item.price || '暂无价格' }}</p>
          </section>
        </article>
      </nut-infinite-loading>
    </nut-pull-refresh>
  </AppPage>
</template>

<script setup>
import { worksType, works } from '@/api/works'
import { classify } from '@/api/index'
const route = useRoute()
const worksTypeList = ref([]) // 作品总类
const typeTab = ref('0') // 作品总类下标
const classifies = ref([]) // 作品分类
const classifiesTab = ref('0') // 作品分类下标
const worksList = ref([]) // 作品列表
const refresh = ref(false) // 刷新
const infinityValue = ref(false) // 触发加载中
const hasMore = ref(true) // 加载更多
const total = ref(0) // 数据总数

// 分页参数
let params = { page: 1, limit: 10, type: null, moduleId: null }

onBeforeMount(async () => {
  await getWorksType()
  await getClassify()
  getWorks()
})

/** 获取作品种类列表(有声书-电子书-纸质书) */
const getWorksType = async () => {
  const result = await worksType()
  result.data.unshift({ type: 0, typeName: '全部' })
  worksTypeList.value = result.data
  typeTab.value = route.query.type || '0'
}

/** 获取作品分类列表 */
const getClassify = async () => {
  const result = await classify()
  result.data.unshift({ moduleId: '0', moduleName: '全部' })
  classifies.value = result.data
  classifiesTab.value = route.query.moduleId || '0'
}

/** 获取专辑列表 */
const getWorks = async () => {
  params.type = typeTab.value === '0' ? null : typeTab.value
  params.moduleId = classifiesTab.value === '0' ? null : classifiesTab.value
  const result = await works(params)
  if (result.data.list.length) {
    worksList.value = [...worksList.value, ...result.data.list]
    total.value = result.data.total || 0
    if (result.data.list.length < 10) {
      hasMore.value = false
    }
    setTimeout(() => {
      refresh.value = false
    }, 800)
    return
  }
  hasMore.value = false
}

/** 作品种类改变 */
const typeChange = () => {
  worksList.value = []
  getWorks()
}

/** 作品分类改变 */
const classifiesChange = () => {
  worksList.value.length = 0
  getWorks()
}

/** 下拉刷新 */
const refreshFun = () => {
  getWorks()
}

/** 触底加载 */
const loadMore = () => {
  if (hasMore.value) {
    params.page++
    getWorks()
    setTimeout(() => {
      infinityValue.value = false
    }, 800)
  }
}
</script>
<style lang="scss">
.nut-tabs__titles {
  padding: 0;
}
.nut-tab-pane {
  padding: 0;
}
:root {
  --nut-tabs-titles-item-color: #777777;
}
</style>
